
<template>
  <el-row>
    <el-col :span="10">
      <el-form label-width="80px">
        <el-form-item label="商品名称">
          <el-input v-model="goodData.name"></el-input>
        </el-form-item>

        <el-form-item label="商品分类">
          <el-select v-model="goodData.category">
              <el-option v-for="(item,index) in categoriesArr" :key="index" :label="item.cateName" :value="item.cateName"></el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="商品价格">
          <el-input-number  v-model="goodData.price" :min="1" :max="999" :precision="2"></el-input-number>
        </el-form-item>

        <el-form-item label="商品图片">
          <Upload v-model="goodData.imgUrl"/>
        </el-form-item>

        <el-form-item label="商品描述">
          <el-input type="textarea" v-model="goodData.goodsDesc"></el-input>
        </el-form-item>

        <el-form-item>
          <el-button type="primary" @click="add">添加商品</el-button>
        </el-form-item>
      </el-form>
    </el-col>
  </el-row>
</template>

<script>
import { add } from "@/api/goods/goods.api";
import { mapState, mapGetters, mapMutations, mapActions } from "vuex";
import Upload from "./compeonents/ImgUpload.vue";
export default {
  components: {
    Upload
  },
  computed: {
    ...mapState("goods", ["categoriesArr", "goodData",'GoodData']),
  },
  data() {
    return {
    };
  },
  methods: {
    ...mapActions("goods", ["sync_update_categories", "sync_add_good"]),
    ...mapMutations("goods", ["update_addDate"]),
   
    add() {
      this.update_addDate(this.goodData)
      this.sync_add_good();
    }
  },
  created() {
    this.sync_update_categories();
  
  }
};
</script>

<style scoped>
</style>